<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .card {
      width: 20%;
      height: 100px;
      margin-top: 10px;
      margin-right: 3%;
      background-color: pink;
    }
  </style>
</head>

<body style="height: 500vh; padding-top: 200vh;">

  <div class="box">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

  <script type="module">
    import { gsap, ScrollTrigger } from "../static/js/gsap/all.js";

    gsap.registerPlugin(ScrollTrigger);
    // ScrollTrigger.batch(".card", {
    //   interval: 0.1, // time window (in seconds) for batching to occur. 
    //   batchMax: 4,   // maximum batch size (targets). Can be function-based for dynamic values
    //   onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [0,2] }, overwrite: true }),
    //   onLeave: batch => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
    //   onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
    //   onLeaveBack: batch => {
    //     console.log(batch);
    //     gsap.set(batch, { opacity: 0, y: 100, overwrite: true })
    //   },
    //   start: "20px bottom",
    //   end: "top top"
    // });

    gsap.set(".box", { y: 100 });

    ScrollTrigger.batch(".card", {
      //interval: 0.1, // time window (in seconds) for batching to occur. 
      //batchMax: 3,   // maximum batch size (targets)
      onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
      onLeave: batch => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
      onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
      onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true })
      // you can also define things like start, end, etc.
    });


    // when ScrollTrigger does a refresh(), it maps all the positioning data which 
    // factors in transforms, but in this example we're initially setting all the ".box"
    // elements to a "y" of 100 solely for the animation in which would throw off the normal 
    // positioning, so we use a "refreshInit" listener to reset the y temporarily. When we 
    // return a gsap.set() in the listener, it'll automatically revert it after the refresh()!
    ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".box", { y: 0 }));
  </script>
</body>

</html>